<template>
	<view class="content">
		<view v-for="item in tableData" class="content-item">
			<van-cell-group inset>
				<van-cell title="任务名" :value="item.ProcedureName" />
				<van-cell title="任务描述" :label="item.Desc" />
				<van-cell title="结束时间" :value="data(item.EndDate)" />
				<view class="btn">
					<van-button plain hairline type="primary" size="small" class="commit"
					v-if="item.Status==1"	@click="showPopup(item.Id)">提交任务</van-button>
				</view>

			</van-cell-group>

		</view>
		<van-popup class="popup" v-model:show="show" :style="{ padding: '64px' }">
			<view class="popup-contest">
				<van-form @submit="onSubmit" label-width="60px" colon>
					<van-cell-group inset>
						<van-field label="图片上传">
							<template #input>
								<van-uploader v-model="fileList" :after-read="img" :max-count="1" />
							</template>
						</van-field>

						<van-field name="result" label="完成情况">
							<template #input>
								<van-radio-group v-model="checked" direction="horizontal">
									<van-radio :name="1">未完成</van-radio>
									<van-radio :name="2">已完成</van-radio>
								</van-radio-group>
							</template>
						</van-field>

						<van-field name="workDesc" label="描述">
							<template #input>
								<van-field  v-model="message" rows="3" autosize 
									type="textarea" placeholder="请输入留言" />
							</template>
						</van-field>


						<view style="margin: 16px;">
							<van-button round block type="primary" native-type="submit">
								提交
							</van-button>
						</view>
					</van-cell-group>
				</van-form>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import axios from "axios"
	import userprocedureapi from "../../api/userprocedureapi"
	import userprocedureRecordApi from '../../api/userprocedureRecordApi';
	const tableData = ref([]);
	const checked = ref(1);
	const Id = ref()
	const workPict = ref("")
	const message = ref("")

	userprocedureapi.getMy().then(res => {
		tableData.value = res.data
		console.log("aa",res.data)
	}).catch(err => {
		console.log("err=>", err);
	})
	const data = (param) => {
		if (!param) return ""

		const date = new Date(param)
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;
	}
	
	
	const fileList = ref([]);
	const img = (film) => {
		let form = new FormData();
		form.set('files', film.file)
		axios.post('http://localhost:5099/api/Files/Upload/FormImg', form, {}).then(res => {
			console.log(res);
			if (res.data.code == 1) {
				workPict.value = res.data.data[0]
				console.log(workPict.value);
			}
		}).catch(err => {
			console.log("111S")
		})
	}
	const show = ref(false);
	const showPopup = (id) => {
		show.value = true;
		Id.value = id
	};
	//提交任务
	const onSubmit = (a) => {
		console.log("aa", a.result);
		a.UserProcedureId = Id.value;
		a.workPict = workPict.value;
		a.workDesc = message.value;
		console.log(a);
		userprocedureRecordApi.add(a).then(res=>{
			console.log("ss",res)
		})
		show.value=false
	}
</script>

<style scoped>
	.content {
		background-color: rgb(243, 243, 243);
		height: 100%;
	}
.content-item{
	padding: 5px;
}
	.btn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 10px;
	}

	.commit {
		width: 80px;
	}

	.popup {
		padding: 0 !important;
		display: flex;
		justify-content: center;
		background-color: rgb(243, 243, 243);
	}

	.popup-contest {
		/* padding: 0; */
		width: 400px;
		height: 400px;
	}

	.van-form {
		height: 100%;
		width: 100%;
	}

	.van-cell-group {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		gap: 10px 0;
	}

	.van-radio-group {
		display: flex;
		justify-content: space-around;
		font-size: 13px;
	}

	.van-cell:after {
		border-bottom: 1px solid black;
	}
</style>